<template>
	<div class="choose-mode-contianer">
		<!-- AI 坐席属性 -->
		<el-row>
			<el-col :span="4">
				<div class="grid-content bg-purple">视频拟合方式</div>
			</el-col>
			<el-col :span="20">
				<div class="grid-content bg-purple">
					<el-radio-group v-model="videoType" @change="changeRadio">
						<el-radio label="real-time-fitting" :disabled="showDetail">实时拟合</el-radio>
						<el-radio label="pre-recorded-video" :disabled="showDetail">预录制视频</el-radio>
						<el-radio label="video-switching" :disabled="showDetail">视频切换</el-radio>
						<el-radio label="no-video" :disabled="showDetail">无需视频</el-radio>
					</el-radio-group>
				</div>
			</el-col>
		</el-row>
		<div v-if="videoType">
			<VoiceWay :videoType="videoType" :showDetail="showDetail" @updateAudioType="updateAudioType" ref="voiceWay" />
			<VoiceMethod :videoType="videoType" />
			<ChooseVideo :videoType="videoType" v-if="showVideoSelect" :showDetail="showDetail" />
		</div>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow';
import VoiceWay from './VoiceWay.vue';
import VoiceMethod from './VoiceMethod.vue';
import ChooseVideo from './ChooseVideo.vue';
import { getBizscenariosInfo } from '../../../api/api';
export default {
	props: {
		showDetail: {
			type: Boolean,
			default: () => false
		},
		resetNode: {
			type: Function
		}
	},
	components: {
		VoiceWay,
		VoiceMethod,
		ChooseVideo
	},
	data() {
		return {
			videoType: 'real-time-fitting',
			voiceWay: '',
			oldRadio: '',
			oldVoiceWay: ''
		};
	},

	mounted() {
		console.log('##$$$', AIWorkflow.getRobotProperty());
		const { videoType } = AIWorkflow.getRobotProperty();
		this.videoType = videoType;
	},

	computed: {
		showVideoSelect() {
			return this.videoType !== 'real-time-fitting' && this.videoType !== 'no-video';
		}
	},
	methods: {
		changeRadio(val) {
			console.log('changeRadio', val, AIWorkflow.businessId);
			console.log('####getRobotProperty', AIWorkflow.getRobotProperty());
			// 先判断业务场景是否停启用，停用状态下才可以切换视频拟合方式
			getBizscenariosInfo(AIWorkflow.businessId).then((res)=>{
                 console.log('getBizscenariosInfo',res);
				 if (res.status === 200) {
                    if(res.data?.status){
						// 已经启用了
                        this.$message.error(`业务场景启用中，无法进行操作！`);
						this.videoType = AIWorkflow.getRobotProperty().videoType; // 还原到老的选择
					}else{
						// silentVideo: Object(SilentVideo), // 静默视频  {"id": "视频Id", "url": "视频URL", "content": "视频"}
						// // talkingVideo: Object(talkingVideo), //视频切换配置的张嘴视频  {"id": "视频Id", "url": "视频URL", "content": "视频"}
						AIWorkflow.setPreviousRobotProperty(AIWorkflow.getRobotProperty());
						if (val === 'real-time-fitting') {
							AIWorkflow.setRobotProperty({ videoType: val, audioType: 'video-native', silentVideo: null, talkingVideo: null });
						} else if (val === 'pre-recorded-video') {
							AIWorkflow.setRobotProperty({ videoType: val, audioType: 'video-native', silentVideo: null, talkingVideo: null });
						} else if (val === 'video-switching') {
							AIWorkflow.setRobotProperty({ videoType: val, audioType: 'tts', silentVideo: null, talkingVideo: null });
						} else if (val === 'no-video') {
							AIWorkflow.setRobotProperty({ videoType: val, audioType: 'tts', silentVideo: null, talkingVideo: null });
						}
						this.videoType = val;
						AIWorkflow.setSilentVideoSource(null);
						AIWorkflow.setTalkingVideoSource(null);
						this.$emit('changeMode', val);
					}
				 }
			}).catch((e)=>{
                this.$message.error(e.message || '获取业务场景信息失败');
				this.videoType = AIWorkflow.getRobotProperty().videoType; // 还原到老的选择
			});
		},

		getVoiceWay(val) {
			switch (val) {
				case 'no-video':
					this.voiceWay = 'tts';
					break;
				case 'video-switching':
					this.voiceWay = 'tts';
					break;
				default:
					this.voiceWay = 'video-native';
					break;
			}
		},

		/**
		 * 更新语音拟合方式
		 * @param {string} audioType 'tts' ,'video-native'
		 */
		updateAudioType(audioType) {
			console.log('updateAudioType', audioType);
			this.confirmChangeModal('pre-recorded-video', audioType);
		},

		/**
		 * 确认是否清空话术，因为切换了AI属性
		 * @param {string} previousRobotProp
		 */
		confirmChangeModal(previousRobotProp) {
			const { oldRadio, radio, voiceWay } = this;
			console.log('confirmChangeModal', oldRadio, radio, voiceWay);
			this.$confirm('更改属性后已编辑模板内容将清空，是否继续?', '温馨提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.oldRadio = radio;
					this.getVoiceWay(radio);
					this.oldVoiceWay = voiceWay;
					// 重置模板
					this.resetNode();
				})
				.then(() => {
					this.$message({
						type: 'success',
						message: '已更改!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
					this.getVoiceWay(oldRadio);
					this.radio = oldRadio;
				});
		}
	}
};
</script>

<style lang="less" scoped>
.choose-mode-contianer {
	position: relative;
	width: 600px;
	.el-row {
		padding: 12px 0;
	}
	.btn-box {
		text-align: right;
	}
}
</style>
